import { useMount } from 'ahooks';
import { Card } from 'antd';
import styles from './index.module.less';

export default function CardInfo({ name, lists }) {
  useMount(() => {});

  return (
    <div className={styles['cardInfo']}>
      <Card style={{ width: '100%' }}>
        {name && (
          <>
            <div className={styles['cardTitle']}>{name}</div>
          </>
        )}
        <div style={{ display: 'flex', width: '100%', flexWrap: 'wrap' }}>
          {lists.map((item, index) => {
            return (
              // eslint-disable-next-line react/no-array-index-key
              <div style={{ width: item.width }} key={index}>
                {item.component}
              </div>
            );
          })}
        </div>
      </Card>
    </div>
  );
}
